<template>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="330px" @close="closeDialog">
        <div v-if="statusIn">
            <p>移入黑名单后，会员将无法使用小程序的任何功能，包括但不限于线上购买、小程序收银，获取/使用优惠券、获取/使用积分、营销互动游戏、停车缴费优惠等功能。</p>
            <p class="pv12 fw600">确定移入黑名单？</p>
            <el-input
                v-model="remark"
                show-word-limit
                maxlength="50"
                placeholder="请输入备注信息(非必填)"
                type="textarea"
                :rows="4"
            />
        </div>
        <div v-else class="text-c pv15">
            <p class="pb8">移出后，会员将立即恢复受限权限</p>
            <p>确定移出黑名单？</p>
        </div>
        <template #footer>
            <el-button @click="cancelDialog">取消</el-button>
            <el-button type="primary" :loading="subLoading" :disabled="subLoading" @click="onSave">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
    import { watch, ref, computed } from "vue";
    import { ElMessage } from "element-plus";
    import { _userStore, _mallStore } from "@/store/config";
    import { postV3MemberUpdateStatus } from "@/assets/api";

    const props = defineProps({
        modelValue: {
            type: Boolean,
            default: false,
        },
        memberId: {
            type: Number,
            default: 0,
        },
        status: {
            type: Number,
            default: 0,
        },
    })

    // 移入黑名单
    const statusIn = computed(() => {
        return props.status === 1;
    })
    const dialogTitle = computed(() => {
        return `移${statusIn.value ? '入' : '出'}黑名单`
    })

    let dialogVisible = ref<boolean>(false);// 显示弹窗
    let subLoading = ref<boolean>(false);
    let remark = ref<string>('');

    // 监听 弹窗显示隐藏
    watch(() => props.modelValue, (newVal: boolean) => {
        dialogVisible.value = newVal;
        subLoading.value = false;
        remark.value = '';
    })

    const emit = defineEmits(['update:modelValue', 'change']);
    // 关闭弹窗
    const closeDialog = () => {
        cancelDialog();
        emit('update:modelValue', dialogVisible.value)
    }
    // 关闭弹窗
    const cancelDialog = () => {
        dialogVisible.value = false;
    }

    const onSave = () => {
        const data: ObjValueStrOrNum = {
            member_id: props.memberId as number,
            user_id: _userStore.userId,
            status: statusIn.value ? 3 : 1,
        }
        if (statusIn.value) {
            data.remark = remark.value;
        }
        if (_mallStore.isGroupManagementPage) {
            data.company_id = _mallStore.companyId;
        } else {
            data.mall_id = _mallStore.mallId;
        }
        ElMessage({ showClose: true, message: '更新中...', type: 'success', duration: 0 });
        subLoading.value = true;
        postV3MemberUpdateStatus(data).then((resp: ObjValueAny) => {
            ElMessage.closeAll();
            if (resp.code === 200) {
                ElMessage.success('操作成功');
                emit('change');
                cancelDialog();
            } else {
                ElMessage.error(resp.msg);
                subLoading.value = false;
            }
        }).catch(() => {
            subLoading.value = false;
        })
    }
</script>